import Card from '@/components/Card';
import {
  Badge,
  Center,
  HStack,
  Image,
  Pressable,
  Text,
  VStack,
} from 'native-base';

export default function () {
  return (
    <>
      <Card bgColor={'white'} mt={'2'}>
        <HStack space={'2'} w={'100%'} justifyContent={'center'}>
          <VStack>
            <Pressable>
              <Center>
                <Badge
                  position={'absolute'}
                  zIndex={1}
                  _text={{fontSize: '2xs', color: 'white'}}
                  bg={'red.500'}
                  top={-5}
                  right={-12}
                  py={'0'}
                  px={'1'}
                  roundedBottomLeft={'none'}
                  rounded={'lg'}>
                  看病洗美
                </Badge>
                <Image
                  alt="service"
                  size={'sm'}
                  source={require('@/assets/img/buyservice.png')}></Image>
                <Text mt={'1'} textAlign={'center'}>
                  购买服务
                </Text>
                <Text textAlign={'center'} fontSize={'xs'} color={'dark.400'}>
                  放心到店服务
                </Text>
              </Center>
            </Pressable>
          </VStack>
          <VStack>
            <Pressable>
              <Center>
                <Image
                  alt="service"
                  size={'sm'}
                  source={require('@/assets/img/buyproduct.png')}></Image>
                <Text mt={'1'} textAlign={'center'}>
                  购买商品
                </Text>
                <Text textAlign={'center'} fontSize={'xs'} color={'dark.400'}>
                  一秒极速送达
                </Text>
              </Center>
            </Pressable>
          </VStack>
          <VStack>
            <Pressable>
              <Center>
                <Image
                  alt="service"
                  size={'sm'}
                  source={require('@/assets/img/doctorcat.png')}></Image>
                <Text mt={'1'} textAlign={'center'}>
                  宠物医生
                </Text>
                <Text textAlign={'center'} fontSize={'xs'} color={'dark.400'}>
                  放心到店就诊
                </Text>
              </Center>
            </Pressable>
          </VStack>
          <VStack>
            <Pressable>
              <Center>
                <Badge
                  position={'absolute'}
                  zIndex={1}
                  _text={{fontSize: '2xs', color: 'white'}}
                  bg={'red.500'}
                  top={-5}
                  right={-12}
                  py={'0'}
                  px={'1'}
                  roundedBottomLeft={'none'}
                  rounded={'lg'}>
                  限时 100 元
                </Badge>
                <Image
                  alt="service"
                  size={'sm'}
                  source={require('@/assets/img/vipcenter.png')}></Image>
                <Text mt={'1'} textAlign={'center'}>
                  会员中心
                </Text>
                <Text textAlign={'center'} fontSize={'xs'} color={'dark.400'}>
                  会员专享特价
                </Text>
              </Center>
            </Pressable>
          </VStack>
        </HStack>
      </Card>
    </>
  );
}
